<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按键修饰符</title>
	</head>
	<body>
		<div id="app">
			{{num1}}
			<div @click="num1++">
				嵌套结构
				<!-- 防止冒泡 -->
				<input type="button" @click.stop="num1++" value="增加1" />
				<input type="button" @click="add()" value="不阻止冒泡" />
			</div>
			<!-- 阻止事件的默认效果 阻止页面跳转 a标签 form表单-->
			<a href="http://baidu.com" @click.prevent="aClick()">百度</a>
			<a href="http://baidu.com" @click.prevent="aClick()">百度</a>
			<a href="http://baidu.com" @click.prevent="aClick()">百度</a>
			<a href="http://4399.com" @click.prevent="aClick()">4399</a>
			<a href="http://hao123.com" @click.prevent="aClick()">hao123</a>
			<a href="https://www.tencent.com" @click.prevent="aClick()">tencent</a>
			<a href="https://www.csdn.net" @click.prevent="aClick()">csdn</a>
		</div>

		<script src="../js/vue.js"></script>
		<script>
			const APP = new Vue({
				el: '#app',
				data: {
					num1: 0,
					num2: 0
				},
				methods: {
					add() {
						this.num1++
					},
					aClick() {
						console.log("事件触发")
					}

				}

			})
		</script>
	</body>
</html>
